<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input{
            display: block;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div style="margin: 100px">
        <input type="text" id="input1" placeholder="输入第一个值">
        <input type="text" id="input2" placeholder="输入第二个值">
        <input type="text" id="input3" placeholder="输入第三个值">
        <input type="text" id="input4" placeholder="输入第四个值">
    </div>

    <script>
        // 获取所有 input 元素
        const inputs = document.querySelectorAll('input');

        // 为每个 input 添加 keydown 事件监听器
        inputs.forEach((input, index) => {
            input.addEventListener('keydown', function(event) {
            // 检查是否按下了回车键 (Enter)
                if (event.key === 'Enter') {
                    // 阻止默认行为（例如表单提交）
                    event.preventDefault();

                    // 聚焦到下一个 input
                    if (index < inputs.length - 1) {
                        inputs[index + 1].focus();
                    }
                }

                // 按下上箭头键
                if (event.key === 'ArrowUp') {
                    event.preventDefault();
                    if (index > 0) {
                        inputs[index - 1].focus(); // 聚焦到上一个 input
                    }
                }

                // 按下下箭头键
                if (event.key === 'ArrowDown') {
                    event.preventDefault();
                    if (index < inputs.length - 1) {
                        inputs[index + 1].focus(); // 聚焦到下一个 input
                    }
                }
            });
        });

        inputs[inputs.length - 1].addEventListener('keydown', function(event) {
            if (event.key === 'Enter') {
                event.preventDefault();
                alert('输入完成');
            }
        });

    </script>
</body>
</html>